<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="common/common.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <link rel="stylesheet" type="text/css" href="../../static/css/bootstrap.min.css"/>
    <script type="text/javascript" src="../../static/js/jquery-2.2.4.min.js"></script>
    <script type="text/javascript" src="../../static/js/jquery.tips.js"></script>
    <script type="text/javascript" src="../../static/js/bootstrap.min.js" ></script>
    <%-- 日历 --%>
    <link rel="stylesheet" type="text/css" href="../../static/css/bootstrap-datetimepicker.min.css"/>
    <script type="text/javascript" src="../../static/js/bootstrap-datetimepicker.min.js" ></script>
    <script type="text/javascript" src="../../static/js/bootstrap-datetimepicker.zh-CN.js" ></script>
    <%--bootbox --%>
    <script src="../../static/js/bootbox.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>云众科技网上预约挂号系统</title>
</head>
<style>
    html body{
        width: 100%;
    }
    .piaoyikuang{
        border: 1px solid #66AFE9;
        border-radius: 10px;
    }
    .piaoyi{
        float: left;
        width: 100px;
        height: 30px;
        border: 0px solid #66AFE9;
        text-align: center;
    }
    .ks-left{
        border: 1px solid #66AFE9;
        border-radius: 10px;
        margin-right: 0px;
    }
    .ks-right{
        border: 0px solid #66AFE9;
        border-radius: 10px;
    }
    .isempty{
        color: red;
    }
</style>
<body>

<!--
    作者：石洪刚
    时间：2017年8月10日14:12:50
    描述：个人中心	联系我们	登录	注册
-->
<div class="container">
    <nav class="nav navbar-default navbar-fixed-top container-fluid" role="navigation" style="background-color:aquamarine;">
        <div class="nav navbar-header">
            <!-- 导航头 -->
            <a class="navbar-brand" href="#">云众科技</a>
            <button class="navbar-toggle" data-toggle= "collapse" data-target="#mynav">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse" id="mynav">
            <!-- 导航内容 -->
            <ul class="nav navbar-nav">
                <li><a href="">联系电话：0451-87362836</a></li>
                <!-- 下面的代码需要登录后才能显示 -->
                <li><a href="../personal/personal.html">个人中心</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-user"></span>欢迎您：张飞</a></li>
            </ul>
            <!-- 导航尾，登录后不再显示 -->
            <div class="nav navbar-right">
                <ul class="nav navbar-nav">
                    <li><a href="../login.html">登录</a></li>
                    <li><a href="/register/pageRegister">注册</a></li>
                </ul>
            </div>
        </div>
    </nav>
</div>
<!--
    作者：石洪刚
    时间：2017年8月10日14:32:38
    描述：项目名称   搜索框 （搜索框只有游客或患者可见）
-->
<div class="container" style="margin-top: 50px;">
    <div class="col-sm-6" >
        <h2 class="text-primary" >云众科技网上预约挂号系统</h2>
    </div>

    <div class="col-sm-6" style="margin-top: 15px;">
        <form method="post" name="form1" class="form form-horizontal">
            <div class="input-group">
                <div class="input-group-btn">
                    <button id="index_search_btn" type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">科室<span class="caret"></span></button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">科室</a></li>
                        <li><a href="#">疾病</a></li>
                    </ul>
                </div><!-- /btn-group -->
                <input type="text" class="form-control" placeholder="请输入搜索内容" >
                <span class="input-group-addon" style="background-color:#f0ad4e;cursor: pointer;" >
						   <span class="glyphicon glyphicon-search "></span>
					     </span>
            </div>
        </form>
    </div>

</div>
<!--
    作者：石洪刚
    时间：2017年8月10日17:04:47
    描述：导航条   游客可见(在dashboard页) ：按科室挂号  按疾病挂号  最新公告
-->
<div class="container" style="margin-top: 10px;">
    <ul class="nav nav-pills guahao" role="tablist" style="background-color:lightcyan">
        <li class="active"><a href="../dashboard.html">首页</a></li>
        <li ><a href="../appointment/dept/listDept.html">按科室预约</a></li>
        <li ><a href="../appointment/illness/listIllness.html">按疾病预约</a></li>
        <li ><a href="../newestAnnoucement/listAnnouncement.html">最新公告</a></li>
    </ul>
</div>
<!--
    作者：石洪刚
    时间：2017年10月26日11:44:45
    描述：注册信息
-->
<div class="container" style="margin-top: 10px;">
    <form class="form form-horizontal" id="form1" name="infoForm" method="post" action="javascript:doSub()">
        <div class="form-group">
            <label class="control-label col-sm-3 col-sm-offset-1">手机号码：</label>
            <div class="col-sm-4">
                <input class="form-control" id="telephone" name="patientTel" type="text" onblur="isPhoneNo(this),telIsOnly(this.value)" placeholder="请您输入有效手机号码" />
                <span class="isempty" id="checkExistPhone"></span>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-3 col-sm-offset-1">手机验证码：</label>
            <div class=" col-sm-4">
                <div class="input-group">
                    <input type="text" class="form-control" id="checkNode1" placeholder="请您输入手机验证码">
                    <span class="input-group-btn">
                        <button class="btn btn-primary" type="button" onclick="getNote()">
									获取验证码
                        </button>
                        <input type="hidden" id="checkNode">
							</span>
                </div>
                <span class="isempty" id="checkExistverification"></span>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-3 col-sm-offset-1" >姓名：</label>
            <div class="col-sm-4">
                <input class="form-control" id="name" name="userName" type="text" onblur="isChinaName(this)" placeholder="输入您的真实姓名"/>
                <span class="isempty" id="checkExistname"></span>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-3 col-sm-offset-1">性别：</label>
            <div class="col-sm-4">
                <div class="radio">
                    <label>
                        <input name="patientSex" id="sex1" type="radio" value="男" > 男
                    </label>
                    &nbsp;&nbsp;
                    <label>
                        <input name="patientSex" id="sex2" type="radio" value="女"> 女
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-3 col-sm-offset-1">身份证号：</label>
            <div class="col-sm-4">
                <input class="form-control" name="patientUid" type="text" onblur="isCardNo(this),createBirth(this.value),idCardIsOnly(this.value)" id="identity" placeholder="请您输入身份证号"/>
                <span class="isempty" id="checkExistID"></span>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-3 col-sm-offset-1">出生日期：</label>
            <div class="col-sm-4">
                <input class="form-control" type="text" id="mydate" name="patientBirth" placeholder="点击选择时间" readonly=""/>
                <span class="isempty" id="checkExistBirth"></span>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-3 col-sm-offset-1">设置密码：</label>
            <div class="col-sm-4">
                <div class="input-group">
                    <input class="form-control" type="password" name="password" id="passwd1" onchange="isPasswd(this)"  placeholder="请输入登录密码"/>

                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" onclick="change()">
                            <span id="sp1" title="隐藏密码" class="glyphicon glyphicon-eye-close"></span>
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu pull-right">
                            <li><a id="a1" href="javascript:showPass()"><span id="sp2" title="显示密码" class="glyphicon glyphicon-eye-open"></span></a></li>
                        </ul>
                    </div>

                </div>
                <span class="isempty" id="checkExistpasswd1"></span>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-3 col-sm-offset-1">确认密码：</label>
            <div class="col-sm-4">
                <input class="form-control" type="password" id="passwd2" onchange="isPasswd(this)" placeholder="请确认登录密码"/>
                <span class="isempty" id="checkExistpasswd2"></span>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-3 col-sm-offset-1">现居住地：</label>
            <div class="col-sm-2">
                <select class="form-control" onchange="queryCByP(this)" id="provinceId" name="provinceId">
                    <option value="" >请选择省份</option>
                    <c:forEach items="${listp}" var="t">
                        <option value="${t.provinceId}" >${t.provinceName}</option>
                    </c:forEach>
                </select>
            </div>
            <div class="col-sm-2">
                <select class="form-control" id="cityId" onchange="queryAByC(this)" name="cityId">
                    <option value="" >请选择城市</option>
                </select>
            </div>
            <div class="col-sm-2">
                <select class="form-control" id="areaId" name="areaId">
                    <option value="" >请选择区县</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-3 col-sm-offset-1"></label>
            <div class="col-sm-4">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" id="protocol" name="protocol" value="同意">本人同意
                    </label>
                    <span class="text-info"><button type="button" style='border:0px solid white;background-color:white' onclick="showProtocol()">《预约挂号服务协议》</button></span>
                </div>
            </div>
        </div>
        <div class="form-group text-center">
            <button class="btn btn-lg btn-warning" type="submit">注&nbsp;&nbsp;册</button>
        </div>
    </form>
</div>
</body>
<script type="text/javascript">
    function doSub(){
        if(""==$("#provinceId").val()||null==$("#provinceId").val()){
            bootbox.alert("请选择省")
        }else if(""==$("#cityId").val()||null==$("#cityId").val()){
            bootbox.alert("请选择市")
        }else if(""==$("#areaId").val()||null==$("#areaId").val()){
            bootbox.alert("请选择区/县")
        }else if($("#protocol").prop("checked")!=true){
            bootbox.alert("请同意《预约挂号服务协议》")
        }else if($("#checkNode").val()!=$("#checkNode1").val()){
            bootbox.alert("验证码不正确,请重新获取")
        }else {
            bootbox.confirm("确认保存吗？",function(r){
                if(r){
                    // zg.wait("open");
                    var url = "/register/addsave";
                    var data = $("form[name='infoForm']").serialize();
                    $.post(url, data, function(responseData) {
                        // zg.wait("close");
                        if (responseData.success) {
                        	bootbox.alert("注册成功",function(){
                        		location.href = "/login";
                        	});
                        } else {
                        	bootbox.alert("注册失败");
                        }
                    }, "json")
                }
            });
        }

    }

    function telIsOnly(inp) {
        var url="/register/telIsOnly"
        var data=inp;
        $.ajax({
            url:url,
            type:"post",
            dataType: "text",
            async: false,
            data:{"data":data},
            success: function(resp){
                if(resp>0){
                    $("#checkExistPhone").html("该手机号码已注册")
                }else {
                    $("#checkExistPhone").html("")
                }

            }
        })


    }





    function idCardIsOnly(inp) {
        var url="/register/idCardIsOnly"
        var data=inp;
        $.ajax({
            url:url,
            type:"post",
            dataType: "text",
            async: false,
            data:{"data":data},
            success: function(resp){
                if(resp>0){
                    $("#checkExistID").html("该身份证已被使用")
                }else {
                    $("#checkExistID").html("")
                }

            }
        })


    }

    //验证码
    function getNote() {
        var url="/register/getNote"
        var data=$("#telephone").val();
        $.ajax({
            url:url,
            type:"post",
            dataType: "text",
            async: false,
            data:{"data":data},
            success: function(resp){
                $("#checkNode").val(resp);

            }
        })
    }














    //查看协议
    function showProtocol(){
        bootbox.dialog({
            message: "<iframe src=\"/register/protocol\" width=\"100%\" height=\"380\" style=\"border:0\"></iframe>",
            title: "《预约挂号服务协议》",
            buttons: {
                Cancel: {
                    label: "取消",
                    className: "btn-default",
                    callback: function () {
                        $("input[name='protocol']").prop("checked",false);
                    }
                }
                , OK: {
                    label: "同意",
                    className: "btn-primary",
                    callback: function () {
                        $("input[name='protocol']").prop("checked",true);
                    }
                }
            }
        });
    }

    /*姓名身份证，手机号提交*/
    function isChinaName(name) {
        var pattern = /^[\u4E00-\u9FA5]{1,6}$/;
        return pattern.test(name);
    }


    // 验证身份证
    function isCardNo(card) {
        var pattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        return pattern.test(card);
    }

    // 验证手机号
    function isPhoneNo(phone) {
        var pattern = /^1[34578]\d{9}$/;
        return pattern.test(phone);
    }


    // 验证密码
    function isPasswd(card) {
        var pattern = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,20}$/;
        return pattern.test(card);
    }

    /*用户名判断*/
    function userName(inputid, spanid) {
        $(inputid).blur(function() {
            if ($.trim($(inputid).val()).length == 0) {
                $(spanid).html("× 名称没有输入");
            } else {
                if (isChinaName($.trim($(inputid).val())) == false) {
                    $(spanid).html("× 名称不合法");
                }
            }
        });
        $(inputid).focus(function() {
            $(spanid).html("");
        });

    };
    userName('#name', "#checkExistname");
    /*身份证判断*/
    function userID(inputid, spanid) {
        $(inputid).blur(function() {
            if ($.trim($(inputid).val()).length == 0) {
                $(spanid).html("× 身份证号码没有输入");
            } else {
                if (isCardNo($.trim($(inputid).val())) == false) {
                    $(spanid).html("× 身份证号不正确");
                }
            }
        });
        $(inputid).focus(function() {
            $(spanid).html("");
        });
    };
    userID('#identity', "#checkExistID");

    /*手机号判断*/
    function userTel(inputid, spanid) {
        $(inputid).blur(function() {
            if ($.trim($(inputid).val()).length == 0) {
                $(spanid).html("× 手机号没有输入");
            } else {
                if (isPhoneNo($.trim($(inputid).val())) == false) {
                    $(spanid).html("× 手机号码不正确");
                }
            }
            $(inputid).focus(function() {
                $(spanid).html("");
            });
        });
    };
    userTel('#telephone', "#checkExistPhone");



    /*出生日期判断*/
    function birth(inputid, spanid) {
        $(inputid).change(function() {
            if ($.trim($(inputid).val()).length == 0) {
                $(spanid).html("× 出生日期没有输入");
            }
            $(inputid).focus(function() {
                $(spanid).html("");
            });
        });
    };
    //birth('#mydate', "#checkExistBirth");

    //密码判断
    function passwd(inputid, spanid) {
        $(inputid).blur(function() {
            if ($.trim($(inputid).val()).length == 0) {
                $(spanid).html("× 密码没有输入");
            } else {
                if (isPasswd($.trim($(inputid).val())) == false) {
                    $(spanid).html("× 密码格式不正确");
                }
            }
            $(inputid).focus(function() {
                $(spanid).html("");
            });
        });
    };
    passwd('#passwd1', "#checkExistpasswd1");

    //确认密码判断
    function passwd2(inputid,inputid2,spanid){
        $(inputid2).blur(function() {
            if ($.trim($(inputid2).val()).length == 0) {
                $(spanid).html("× 密码没有输入");
            } else {
                // if (isPasswd($.trim($(inputid2).val())) == false) {
                // 	$(spanid).html("× 密码格式不正确");
                // }else {
                if ($.trim($(inputid2).val()) != $.trim($(inputid).val())) {
                    $(spanid).html("× 前后密码不一致");
                }
                // }
            }
            $(inputid2).focus(function() {
                $(spanid).html("");
            });
        });
    }

    passwd2('#passwd1','#passwd2', "#checkExistpasswd2");

    //改变密码框属性
    function change(){
        var type=$("#passwd1").attr("type")
        if(type=="password"){
            $("#passwd1").attr("type","text")
            $("#passwd2").attr("type","text")
        }
        if(type=="text"){
            $("#passwd1").attr("type","password")
            $("#passwd2").attr("type","password")
        }
    }
    //根据身份证号生成性别和日期
    function createBirth(inp){
        if(inp != null && inp != '')
        {
            //获取出生日期
            var birthday = inp.substring(6, 10) + "-" + inp.substring(10, 12) + "-" + inp.substring(12, 14);
            $("#mydate").val(birthday);
            //获取性别
            if (parseInt(inp.substr(16, 1)) % 2 == 1) {
                $("#sex1").prop("checked","true");//男
            } else {
                $("#sex2").prop("checked","true");
            }//女
        }
    }




    //查询市
    function queryCByP(sel) {
        var urlc="/register/queryCByP"
        var data=sel.value;
        $.post(urlc,{"provinceId":data},function (resp) {
            $("#city").empty();
            var option="";
            $.each(resp,function (i,val) {
                option+= "<option value=\"" + val.cityId + "\" >" + val.cityName + "</option>";
            })
            $("#cityId").append(option);

        })
    }
    //查询区
    function queryAByC(sel) {
        var urla="/register/queryAByC"
        var data=sel.value;
        $.post(urla,{"cityId":data},function (resp) {
            $("#area").empty();
            var option="";
            $.each(resp,function (i,val) {
                option+= "<option value=\"" + val.areaId + "\" >" + val.areaName + "</option>";
            })
            $("#areaId").append(option);

        })
    }



    //注册提交
    // function doSub(){
    // 	bootbox.confirm("确定要提交注册信息？",function(result){
    // 		if(result){
    // 			location.href="../login.html";
    // 		}
    // 	})
    // }

    //日期的显示
    $("#mydate").datetimepicker({
        minView: 'month',
        format:'yyyy-mm-dd',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        showMeridian: 1,
        endDate:new Date(),
        language: 'zh-CN',
        buttonText:'如果你需要修改出生日期,请手动修改'
    }).on('hide',function(ev){
        if ($.trim($("#mydate").val()).length == 0) {
            $("#checkExistBirth").html("× 出生日期没有输入");
        }else{
            $("#checkExistBirth").html("");
        }
    });
</script>
</html>
